import React from 'react';

class Demo extends React.Component {
    state = {
      open : false,
      list : []
    }

  onToggleOpen = () =>{
    this.setState({ open : !this.state.open });
  }

  onChangeList = (insert) =>{
    const {list} = this.state;
    let nextList = []
    if(insert){
      nextList = [...list, 'line']
    }else{
      nextList = list.slice(0,-1)
    }
    this.setState({list: nextList,open:true})
  }

  render() {
    const {open , list} = this.state
    return (
      <div>
        <button onClick={() => { this.onChangeList(true)}}>加一行</button>
        <button onClick={() => { this.onChangeList(false)}}>减一行</button>
        <button onClick={this.onToggleOpen}>{open ?'收起':'展开'}</button>
        { !!open &&
        ( 
          <ul>
          {list.map((item, index) =>{
            return <li key={index}>{item}</li >
          })}
          </ul>
        )
        }
      </div>
    );
  }
}

export default Demo;
